<template>
  <div class="city-header">
    <div class="go-back">
      <img
        src=""
        alt=""
        @click="fallback"
      />
      <div class="title">请选择观影城市 · {{ store.state.getinfo.name }}</div>
    </div>
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      background="#f1f1f1"
    />
  </div>
  <div class="point">
    <h2>GPS定位你所在城市</h2>
    <div class="onecity">{{ store.state.getinfo.name }}</div>
  </div>
  <div class="hotcity">
    <h2>热门城市</h2>
    <div class="hcity">
      <div class="onecity" @click="arealocation('北京')">北京</div>
      <div class="onecity" @click="arealocation('深圳')">深圳</div>
      <div class="onecity" @click="arealocation('广州')">广州</div>
      <div class="onecity" @click="arealocation('上海')">上海</div>
    </div>
  </div>
  <van-index-bar :index-list="indexList" highlight-color="#ff0000">
    <div v-for="item in regionlist" :key="item.index">
      <van-index-anchor
        :index="item.index"
        style="background: #ccc"
      ></van-index-anchor>
      <van-cell
        v-for="(sub, key) in item.data"
        :title="sub.name"
        :key="sub.name + key"
        @click="arealocation(sub.name)"
      />
    </div>
  </van-index-bar>
</template>

<script setup lang="ts">
import { cityListData } from "../axios/http";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter, onBeforeRouteLeave } from "vue-router";
import mit from "../configuration/mitt";
const store = useStore();
// 传递底部tap栏状态
mit.emit("flag", false);
console.log(store.state.getinfo.name);
// 索引
const indexList = ref<Array<any>>();
// 地区
const regionlist = ref<Array<any>>();
onMounted(async () => {
  const arr = await cityListData();
  console.log(arr);
  indexList.value = arr[1];
  regionlist.value = arr[0];
});
// 跳转及选择地区
const router = useRouter();
function arealocation(name: string) {
  let ctyid = "";
  regionlist.value?.forEach((itm) => {
    itm.data.forEach((na: any) => {
      console.log(na, name, "122221321");
      if (na.name == name) {
        ctyid = na.cityId;
      }
    });
  });
  if (ctyid == "" || ctyid == "0") {
    ctyid = "440100";
    store.commit("returns", {
      name: "广州",
      id: ctyid,
    });
  }
  store.commit("returns", {
    name: name,
    id: ctyid,
  });
  router.push("/cinema");
}
function fallback() {
  router.go(-1);
}
// 退出这个页面时 触发组件守卫
onBeforeRouteLeave(() => {
  mit.emit("flag", true);
});
</script>
<style scoped lang="scss">
.city-header {
  .go-back {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 50px;

    img {
      width: 30px;
      padding: 0 5px;
    }

    .title {
      margin-right: 10px;
      font-size: 15px;
      color: #888;
    }
  }
}

.point,
.hotcity {
  margin: 20px 20px 20px;

  h2 {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 10px;
    font-weight: normal;
  }

  .onecity {
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
    color: #191a1b;
    display: inline-block;
    padding: 0 10px;
    margin-right: 20px;
  }
}
</style>
